<template>
	<view>
		<map name="maps" :show-location="true" :markers='markers' :longitude="longitude" :latitude="latitude"
			class="maps" @regionchange="mapChange"></map>

		<view class="listBox bb por" v-if="show">
		<!-- 	<image src="/static/clear@2x.png" style="width: 48rpx;height: 48rpx;top: 32rpx;right: 30rpx;" class="poa"
				mode="" @click="show = false"></image> -->
			<view @click="changHeight"
				style="width: 100rpx;height: 30rpx;border-top: 6rpx solid #000;margin-left: 137px;opacity: 0.2;"></view>
			<view class="title">附件公磅</view>

			<scroll-view scroll-y="true" :style="'height:' + heights + 'rpx;transition: all .3s;'">
				<view v-for="item in list" :key="item.id" class="u-flex"
					style="width: 100%;height: 144rpx;border-bottom: 1rpx solid rgba(232, 232, 232, 1);">
					<!-- <image src="../../static/分组3@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image> -->
					<view class="tonnage">{{ item.tonnage ? (item.tonnage + 't') : '未知' }}</view>
					<view class="u-flex-col" style="width: 256rpx;">
						<view>{{item.name}}</view>
						<view class="u-flex">
							<!-- <view style="font-size: 24rpx;">{{(item.distance / 1000).toFixed(1)}}公里</view> -->
							<view class="dayCount">7天内完成称重{{item.order_num_in_7days}}次</view>
						</view>
					</view>
					<!-- <view class="phoneBox u-flex u-row-center" style="margin-left: 60rpx;"
						@callPhone="callPhone(item.mobile)">
						<image src="../../static/call@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
						<view style="margin-left: 4rpx;font-size: 24rpx;">电话</view>
					</view> -->
					<view class="u-flex-col" style="width: 300rpx;align-items: flex-end;">
						<view class="navBox u-flex u-row-center" style="width: max-content;"
							@click="toNavigation(item.latitude,item.longitude,item.name,item.address)">
							<image src="../../static/navigate@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
							<view style="margin-left: 4rpx;font-size: 24rpx;">
								{{(item.distance / 1000).toFixed(1)}}km
							</view>
						</view>
						<view style="font-size: 24rpx;font-weight: 900;text-align: center;margin-top: 10rpx;">
							{{item.charge_config_desc}}
						</view>
						
					</view>
				
				</view>
			</scroll-view>



		</view>
	</view>
</template>

<script>
	import {
		getNearbyList
	} from '../../common/api.config.js'
	export default {
		data() {
			return {
				show: true,
				list: [],

				markers: [],
				latitude: '',
				longitude: '',
				heights: 160
			}
		},
		onShow() {
			this.getPosition()
		},
		methods: {
			changHeight() {
				if (this.heights == 160) {
					this.heights = 600
				} else {
					this.heights = 160
				}
			},
			toNavigation(latitude, longitude, name, address) {
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name,
					address,
					fail(err) {
						console.log(err);
					}
				})
			},
			getPosition() {
				uni.getLocation({
					success: ({
						latitude,
						longitude
					}) => {
						this.longitude = longitude
						this.latitude = latitude
						this.getList(latitude, longitude)
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			mapChange(e) {
				console.log(e);
				if (e.type == 'end') {
					const {
						latitude,
						longitude
					} = e.detail.centerLocation
					this.getList(latitude, longitude)
				}
			},
			callPhone(mobile) {
				if (!mobile) {
					uni.showToast({
						title: '暂无电话号',
						icon: 'none'
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: mobile
				})
			},
			async getList(lat, lon) {
				uni.showLoading({
					title: '请求中'
				})
				const {
					data,
					code
				} = await getNearbyList({
					longitude: lon,
					latitude: lat,
					page: 1,
					page_size: 20
				})
				uni.hideLoading()
				console.log(data);
				if (code == 1) {
					this.list = data
					this.renderMap(data)
				}
			},
			renderMap(datas) {
				var markers = []
				const data = datas
				data.forEach((v, idx) => {
					markers.push({
						'id': idx,
						'latitude': v.latitude,
						'longitude': v.longitude,
						'title': v.name,
						'iconPath': '../../static/poi@2x.png',
						'width': '40',
						'height': '40',
						callout: {
							content: v.name + ' ' + v.tonnage + 't',
							color: '#FFFFFF',
							fontSize: 12,
							bgColor: '#301819',
							padding: 10,
							borderRadius: 20,
						}
					})
				})
				this.markers = markers
			}
		}
	}
</script>

<style lang="scss">
	.maps {
		width: 100vw;
		height: 100vh;
	}

	view {
		color: rgba(56, 56, 56, 1);
	}

	.phoneBox {
		width: 120rpx;
		height: 56rpx;
		border-radius: 200rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(255, 235, 59, 1);
		// margin-left: 60rpx;
	}

	.navBox {
		// width: 120rpx;
		padding: 0 16rpx;
		height: 56rpx;
		border-radius: 200rpx;
		background: rgba(255, 235, 59, 1);
		margin-left: 16rpx;
	}

	.listBox {
		width: 688rpx;
		opacity: 1;
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 10rpx 14rpx 0rpx rgba(0, 0, 0, 0.16);
		position: fixed;
		left: 32rpx;
		bottom: 22rpx;
		padding: 20rpx 36rpx 6rpx 36rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			width: 100%;
			text-align: center;
		}
	}

	.tonnage {
		width: 50rpx;
		height: 50rpx;
		background: rgba(255, 235, 59, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		border-radius: 50%;
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 50rpx;
		text-align: center;
		margin-right: 12rpx;
	}

	.dayCount {
		height: 22rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(42, 130, 228, 1);
		margin: 8rpx 0 0 0rpx;
	}
</style>
